<template>
  <div class="wpcc-admin-main">
    <h1>Widgets Center</h1>

    <div class="main-pannel w-full h-full flex flex-col">
      <!-- 顶部工具栏 -->
      <div class="toolbar w-full bg-gray-100 p-4 border-b">
        <div class="flex items-center justify-between">
          <div class="flex space-x-4">
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-400">工具1</button>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-400">工具2</button>
          </div>
          <!-- 搜索栏 -->
          <div class="relative">
            <input type="text" placeholder="搜索..." class="pl-4 pr-10 py-2 border rounded-lg focus:outline-none focus:border-green-500 w-64" />
            <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要内容区域：左右布局 -->
      <div class="flex flex-1 h-full">
        <!-- 左侧面板 -->
        <div class="flex-1 p-0 py-4 overflow-y-auto">
          <div class="flex flex-wrap gap-4">
            <div
              v-for="(item, index) in 6"
              :key="index"
              class="max-w-[400px] bg-white rounded-2xl overflow-hidden shadow-md transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-2 hover:shadow-xl"
            >
              <div class="w-full h-[250px] overflow-hidden">
                <img src="https://landkit.goodthemes.co/assets/img/photos/photo-7.jpg" :alt="title" class="w-full h-full object-cover transition-transform duration-300 ease-in-out hover:scale-105" />
              </div>
              <div class="p-6">
                <h2 class="text-2xl font-semibold text-gray-900 mb-3">Photos should appeal to a sense of adventure</h2>
                <p class="text-base text-gray-600 leading-relaxed mb-5">Cozy vibes are out and this summer you should focus on making customer's feel brave.</p>
                <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                  <div class="flex items-center gap-2">
                    <img src="https://landkit.goodthemes.co/assets/img/avatars/avatar-1.jpg" :alt="author" class="w-8 h-8 rounded-full object-cover" />
                    <span class="text-sm text-gray-700">Danny Devito</span>
                  </div>
                  <span class="text-sm text-gray-500">May 02</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧可调整宽度的面板 -->
        <div class="w-[300px] border-l border-gray-200 relative" ref="rightPanel">
          <!-- 拖拽调整器 -->
          <div class="absolute left-0 top-0 w-1 h-full cursor-col-resize hover:bg-gray-300" @mousedown="startResize"></div>
          <div class="p-4">右侧面板内容</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import HEADERTAG from "../components/header.vue";

const rightPanel = ref(null);
let isResizing = false;
let startX = 0;
let startWidth = 0;

const startResize = (e) => {
  isResizing = true;
  startX = e.clientX;
  startWidth = rightPanel.value.offsetWidth;
  document.addEventListener("mousemove", handleMouseMove);
  document.addEventListener("mouseup", stopResize);
};

const handleMouseMove = (e) => {
  if (!isResizing) return;
  const diff = startX - e.clientX;
  rightPanel.value.style.width = `${startWidth + diff}px`;
};

const stopResize = () => {
  isResizing = false;
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("mouseup", stopResize);
};

onUnmounted(() => {
  document.removeEventListener("mousemove", handleMouseMove);
  document.removeEventListener("mouseup", stopResize);
});
</script>

<style>
.wpcc-admin-main {
  user-select: none; /* 防止拖拽时选中文本 */
}
</style>
